<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title><?=config_item('my_title')?></title>
    <base href="<?=base_url()?>">
    <link rel="stylesheet" href="plugin/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="panel cloud_panel">
    <div class="panel-body cloud_panel_body">
        <!--<div class="folder_tree">

        </div>-->
        <div class="cloud_container">
            <div class="cloud_toolbar">
                <!--<div class="upload">
                    <a href="<?=site_url('/uploads/location')?>" class="btn btn-default btn-sm"><i
                            class="fa fa-upload"></i>&nbsp;点击上传</a>
                </div>-->
                <div class="search">
                    <div class="input-group">
                        <input type="text" name="key" class="form-control input-sm" placeholder="按文件名称搜索">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default btn-sm search-btn-hook"><i
                                    class="fa fa-search"></i></button>
                        </div>
                    </div>
                </div>
                <div class="select_info select-info-hook">请选择文件</div>
            </div>
            <div class="cloud_list cloud-list-hook">
                <div class="list-content-hook">
                    <div class="list-hook clearfix"></div>
                    <script type="text/html" id="listTpl">
                        {{each list as val}}
                        <div class="item item-hook" title="{{val.client_name}}">
                            <input type="checkbox" class="checkbox checkbox-hook"
                                   data-content='{"id":"{{val.id}}","rel_path":"{{val.rel_path}}","thumb_rel_path":"{{val.thumb_rel_path}}","is_image":"{{val.is_image}}","file_ext":"{{val.file_ext}}","client_name":"{{val.client_name}}","file_size":"{{val.file_size}}","image_width":"{{val.image_width}}","image_height":"{{val.image_height}}"}'>
                            <div class="thumb">
                                <img src="{{val.thumb_rel_path}}"
                                     class="thumb-hook"
                                     data-is-image="{{val.is_image}}">
                            </div>
                            <div class="name">{{val.client_name}}</div>
                        </div>
                        {{/each}}
                    </script>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-footer cloud_panel_footer">
        <button type="button" class="btn btn-primary save-hook">保存</button>
        <button type="button" class="btn btn-default close-hook">取消</button>
    </div>
</div>

<script type="text/javascript" src="plugin/require.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
    require(['uploadsUnit', 'unit', 'jqthumb', 'template', 'dropload'], function (uploadsUnit, unit, jqthumb, template) {
        //容器id
        var queueid = '<?=$queueid?>';
        //是否批量上传
        var multi = '<?=$multi?>';
        //初始化页码
        var pageIndex = 0;
        //获取窗口索引
        var index = parent.layer.getFrameIndex(window.name);
        //设置弹窗标题
        parent.layer.title('云上传');

        //搜索
        $('.search-btn-hook').on('click', function () {
            $('.list-hook').html('');
            pageIndex = 0;
            dropload.unlock();
            dropload.noData(false);
            dropload.resetload();
        });

        //加载数据
        var dropload = $('.cloud-list-hook').dropload({
            domDown: {
                domRefresh: '',
                domNoData: '<div class="dropload-noData dropload-nodata-hook">暂无更多</div>'
            },
            loadDownFn: function (me) {
                pageIndex++;
                var data = {
                    x: Math.random(),
                    page: pageIndex,
                    key: $('input[name="key"]').val()
                };
                $.ajax({
                    url: '<?=$get_list_url?>',
                    type: 'post',
                    dataType: 'json',
                    data: data,
                    success: function (data) {
                        if (data.list.list.length) {
                            $('.list-hook').append(template('listTpl', data.list));
                        } else {
                            me.lock();
                            me.noData();
                        }
                        me.resetload();

                        if (!data.list.list.length && pageIndex == 1) {
                            $('.dropload-nodata-hook').html('暂无数据');
                        }
                    }
                })
            }
        });

        //选择文件
        $('.list-hook').on('click', '.item-hook', function () {
            var $_siblings = $(this).siblings();
            var $_checkbox = $(this).find('.checkbox-hook');
            var status = $_checkbox.is(':checked');
            $_checkbox.prop('checked', !status);
            if (!status) {
                $(this).addClass('checked');
            } else {
                $(this).removeClass('checked')
            }
            //单选
            if (!eval(multi)) {
                $_siblings.removeClass('checked')
                        .find('.checkbox-hook')
                        .prop('checked', false);
            }
            var checkedNum = $('.list-hook').find('input:checkbox:checked').length;
            var desc = checkedNum ? '已选中' + checkedNum + '个文件' : '请选择文件';
            $('.select-info-hook').html(desc);
        });

        //保存
        $('.save-hook').on('click', function () {
            var list = [];
            var inputName = queueid;
            var checkboxChecked = $('.checkbox-hook:input:checked');
            var checkboxCheckedLen = checkboxChecked.length;
            if (checkboxCheckedLen) {
                checkboxChecked.each(function () {
                    var data = $(this).data('content');
                    var item = $(uploadsUnit.config.itemTemplate).clone();
                    var src = parseInt(data.is_image) ? data.rel_path : uploadsUnit.thumbnail(data.file_ext);
                    var thumbSrc = data.thumb_rel_path || uploadsUnit.thumbnail(data.file_ext);
                    //状态
                    item.addClass('complete');
                    //预览图片信息
                    item.find('.uploads-preview-hook')
                            .attr('data-content', '{"src":"' + src + '","client_name":"' + data.client_name + '","file_size":"' + data.file_size + '","image_width":"' + data.image_width + '","image_height":"' + data.image_width + '","is_image":"' + data.is_image + '"}');
                    //input
                    item.find('.uploads-input-hook')
                            .attr('name', inputName + '[]').val(data.id);
                    //缩略图
                    item.find('.uploads-thumb-hook').attr('src', thumbSrc)
                            .attr('alt', data.client_name)
                            .jqthumb({width: '69', height: '69'});
                    //图片标题
                    item.attr('title', data.client_name);
                    //添加到容器
                    if (eval(multi)) {
                        $(window.parent.document).find('#' + queueid).append(item);
                    } else {
                        $(window.parent.document).find('#' + queueid).html(item);
                    }

                });
            }
            //关闭弹窗
            parent.layer.close(index);
        });

        //关闭弹窗
        $('.close-hook').on('click', function () {
            parent.layer.close(index);
        })


    })
    ;
</script>
</body>
</html>